<template>
  <Header />
  <div class="indexContainer content">
    <!-- 头部公共组件 -->
    <!-- banner -->
    <div class="banner">
      <div class="banner-container">
        <!-- 二级分类 -->
        <TypeNav />
      </div>
      <div class="rightBanner">
        <div class="homeHeaderLinks">
          <div class="homeHeaderLinksA">美团外卖</div>
          <div class="homeHeaderLinksA">猫眼电影</div>
          <div class="homeHeaderLinksA">美团酒店</div>
          <div class="homeHeaderLinksA">民宿/公寓</div>
          <div class="homeHeaderLinksA">商家入驻</div>
          <div class="homeHeaderLinksA">美团公益</div>
        </div>
        <div class="bannerRow">
          <div class="bannerSlider">
            <div class="swiper">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <img src="../../../public/images/ia_300000162.jpg" alt="" />
                </div>
                <div class="swiper-slide">
                  <img src="../../../public/images/ia_300000163.jpg" alt="" />
                </div>
                <div class="swiper-slide">
                  <img src="../../../public/images/ia_300000164.jpg" alt="" />
                </div>
                <div class="swiper-slide">
                  <img src="../../../public/images/ia_300000165.jpg" alt="" />
                </div>
                <div class="swiper-slide">
                  <img src="../../../public/images/ia_300000166.png" alt="" />
                </div>
              </div>
              <!-- 如果需要分页器 -->
              <div class="swiper-pagination"></div>

              <!-- 如果需要导航按钮 -->
              <div class="swiper-button-prev"></div>
              <div class="swiper-button-next"></div>
            </div>
          </div>

          <div class="shadow1">
            <img src="../../../public/images/ia_300000167.jpg" alt="" />
          </div>
          <div class="bannerLogincard">
            <div class="default" v-show="!islogin">
              <div class="titleImg">
                <img src="../../../public/images/ia_300000007.jpg" alt="" />
              </div>
              <span>Hi!你好</span>
              <button class="register" @click="goRegister">注册</button>
              <button class="login" @click="goLogin">立即登录</button>
            </div>
            <div class="loginBox" v-show="islogin">
              <div class="titleImg">
                <img v-lazy="userImg" alt="" />
              </div>
              <span>{{ userName }}</span>
              <div class="icon">
                <div @click="goPersonal('myOrder')">
                  <span class="iconfont icon-orders"></span>
                  <p>我的订单</p>
                </div>
                <div @click="goPersonal('Collection')">
                  <span class="iconfont icon-start"></span>
                  <p>我的收藏</p>
                </div>
                <div @click="goPersonal('Voucher')">
                  <span class="iconfont icon-card"></span>
                  <p>抵用券</p>
                </div>
                <div @click="goPersonal('meiTuan')">
                  <span class="iconfont icon-money"></span>
                  <p>余额</p>
                </div>
                <div @click="goPersonal('meiTuan')">
                  <span class="iconfont icon-ellipsis"></span>
                  <p>更多</p>
                </div>
                <div></div>
              </div>
            </div>
          </div>
        </div>
        <div class="bannerRow">
          <div class="pic-2">
            <img src="../../../public/images/ia_300000168.png" alt="" />
          </div>
          <div class="pic-3">
            <img src="../../../public/images/ia_300000169.jpg" alt="" />
          </div>
          <div class="pic-4">
            <img src="../../../public/images/ia_300000170.jpg" alt="" />
          </div>
          <div class="downloadApp">
            <div class="qrcodeBox">
              <img src="../../../public/images/ia_300000008.png" alt="" />
            </div>
            <p class="appName">美团APP手机版</p>
            <p class="sl">
              <span class="red">1元起</span><span class="gary">吃喝玩乐</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 猫眼电影 -->
    <div class="maoyanContainer">
      <div class="navContainer">
        <ul class="clearfix">
          <li class="title">猫眼电影</li>
          <li
            class="navItem"
            v-for="item in twoData"
            :key="item.id"
            :class="{ active: isActive == item.id }"
            @click="changeIndex($event, item.id)"
            :data-id="item.id"
          >
            {{ item.name }}
          </li>
          <li class="right">更多 ></li>
        </ul>
      </div>
      <!-- 电影图片轮播 -->
      <div class="slider">
        <div class="sliderList">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <!-- 猫眼电影第一张 -->
                <div class="flex">
                  <div
                    class="sliderContent"
                    v-for="(item, id) in filmListFirst"
                    :key="id"
                  >
                    <div>
                      <img class="image" v-lazy="item.img" alt="" />
                      <img
                        class="imageSmall"
                        src="../../../public/images/ia_300000021.png"
                        alt=""
                      />
                    </div>
                    <div class="filmInfo">
                      <p class="filmScore">
                        观众评 <span>{{ item.sc }}</span>
                      </p>
                      <p class="filmName">{{ item.nm }}</p>
                      <span class="buyTicket">购票</span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 猫眼电影第二张 -->
              <div class="swiper-slide">
                <div class="flex">
                  <div
                    class="sliderContent"
                    v-for="(item, id) in filmListSecond"
                    :key="id"
                  >
                    <div>
                      <img class="image" v-lazy="item.img" alt="" />
                      <img
                        class="imageSmall"
                        src="../../../public/images/ia_300000021.png"
                        alt=""
                      />
                    </div>
                    <div class="filmInfo">
                      <p class="filmScore">
                        观众评 <span>{{ item.sc }}</span>
                      </p>
                      <p class="filmName">{{ item.nm }}</p>
                      <span class="buyTicket">购票</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 推荐名宿 -->
    <div class="maoyanContainer">
      <div class="navContainer">
        <ul class="clearfix indexNavContainer">
          <li class="title">推荐名宿</li>
          <li
            class="navItem"
            v-for="(item, index) in recommendCityList"
            :key="item.cityId"
            :class="currentCityIndex === index ? 'active' : ''"
            :data-id="item.cityId"
            @click="changeCityIndex($event, index)"
          >
            {{ item.cityName }}
          </li>
          <li class="right">更多 ></li>
        </ul>
      </div>
      <!-- 民宿列表 -->
      <div class="minsuView">
        <div class="products">
          <div
            class="minsuItem"
            v-for="(item, index) in getHotelList"
            :key="index"
          >
            <div class="productHeader">
              <img
                v-lazy="item.coverImage ? item.coverImage : ''"
                class="productImg"
                alt=""
              />
              <img
                v-lazy="item.hostAvatarUrl ? item.hostAvatarUrl : ''"
                class="headImg"
                alt=""
              />
            </div>
            <div class="productInfo">
              <p class="productTitle">
                {{ item.title }}
              </p>
              <p class="subTitle">
                整套1居室·可住3人 | {{ item.locationArea }}
              </p>
              <p class="priceNumber">
                <span class="priceIcon">￥</span>{{ item.price }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 猜你喜欢 -->
    <div class="maoyanContainer">
      <div class="navContainer">
        <ul class="clearfix color">
          <li class="title">猜你喜欢</li>
          <li class="navItem active">为你甄选最适合的</li>
          <li class="right">更多 ></li>
        </ul>
      </div>
      <!-- 猜你喜欢列表 -->
      <div class="recommendList">
        <div
          class="cardContainer"
          v-for="(item, itemId) in youLikeList"
          :key="itemId"
        >
          <div class="recommendWrapper">
            <div class="imgBox">
              <img v-lazy="item.imgUrl" alt="" class="image" />
            </div>
            <div class="infoBox">
              <div class="title" :title="item.title">
                {{ item.title }}
              </div>
              <div class="scoreLine">
                <div class="score">
                  <div class="goodscommentNum">
                    <div class="goodsStartBottom">
                      <i
                        v-for="index of 5"
                        :key="index"
                        class="iconfont icon-start gray"
                      ></i>
                    </div>
                    <div
                      class="goodsStartTop"
                      :style="'width:' + (item.score * 100) / 5 + '%;'"
                    >
                      <i
                        v-for="index of 5"
                        :key="index"
                        class="iconfont icon-start"
                      ></i>
                    </div>
                  </div>
                </div>
                <div class="commentNumber">{{ item.commentNum }}个评价</div>
              </div>
              <div class="descLine">{{ item.areaName }}</div>
              <div class="bottomLine">
                <div class="priceBox">
                  <span>
                    <span class="yuan">￥</span>
                    <span class="priceNumber">{{ item.lowPrice }}</span>
                    <span class="priceDesc">起</span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部导航 -->
    <BottomNav></BottomNav>
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "Home",
});
</script>

<script setup>
import { ref } from "vue";
import TypeNav from "../../components/TypeNav";
import BottomNav from "../../components/BottomNav";
import Footer from "../../components/Footer/index.vue";
import Header from "../../components/Header/index.vue";
import router from "@/router/index.js";
import {
  filmListApi,
  comingSoonListApi,
  getCityListApi,
  getHotelListApi,
  youLikeListApi,
} from "@/api/home";
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import { onMounted } from "vue";
// import { Button } from "ant-design-vue";

// 是否登录
const islogin = ref(false);
// 用户头像
const userImg = ref();
// 用户名
const userName = ref();

const isActive = ref(1);
// 存储猜你喜欢列表
const youLikeList = ref([]);

// 存储推荐民宿城市列表
const recommendCityList = ref([]);

// 存储酒店列表
const getHotelList = ref([]);

// 存储首页猫眼电影列表
const filmListFirst = ref([]);
const filmListSecond = ref([]);
const twoData = [
  {
    id: 1,
    name: "正在热映",
  },
  {
    id: 2,
    name: "即将上映",
  },
];
// 猫眼电影
const changeIndex = async (event, id) => {
  isActive.value = event.target.dataset.id;
  // 发送请求
  getFilmActiveList(id);
};
// 封装猫眼电影的两个请求
const getFilmActiveList = async (id) => {
  // 如果id=1，发送第一个请求filmListApi；
  // 如果id=2，发送第二个请求comingSoonListApi；
  let result1;
  if (id == 2) {
    result1 = await comingSoonListApi(id);
  } else if (id == 1) {
    result1 = await filmListApi();
  }
  // 发送请求后，把数组内的数据清空，(实现图片的快速切换)
  filmListFirst.value = [];
  filmListSecond.value = [];

  // 处理图片的url=>"w.h"后，再进行数据处理
  const filmListData = result1;
  if (id == 2) {
    result1.data.coming.forEach((item) => {
      item.img = item.img.replace(/\/w.h\//, "/");
    });
    filmListFirst.value = filmListData.data.coming.splice(0, 5);
    filmListSecond.value = result1.data.coming;
  } else if (id == 1) {
    result1.data.hot.forEach((item) => {
      item.img = item.img.replace(/\/w.h\//, "/");
    });
    filmListFirst.value = filmListData.data.hot.splice(0, 5);
    filmListSecond.value = result1.data.hot;
  }
};

// 民宿
const currentCityIndex = ref(0);
const changeCityIndex = async (event, index) => {
  // 把下标和id都传过来(下标控制active显示，id用来发送请求)
  currentCityIndex.value = index;
  // console.log("1212", id);
  getHotelList.value = [];
  // 点击时，发送请求，覆盖数据
  const result5 = await getHotelListApi(event.target.dataset.id);
  // console.log("getHotelList", result5);
  getHotelList.value = result5.productList;
};

// 在onMounted中发送请求
onMounted(async () => {
  if (localStorage.getItem("user")) {
    islogin.value = true;
    userImg.value = JSON.parse(localStorage.getItem("user")).titleImg;
    userName.value = JSON.parse(localStorage.getItem("user")).phone;
  } else {
    islogin.value = false;
  }
  // 用于获取首页猫眼电影列表
  getFilmActiveList(isActive.value);

  // 用于获取首页推荐民宿列表
  const result2 = await getCityListApi();
  console.log(result2.cityList);
  recommendCityList.value = result2.cityList;

  // 用于根据城市id获取民宿详细
  const id = recommendCityList.value[0].cityId;
  const result3 = await getHotelListApi(id);
  // console.log("getHotelList", result3.productList);
  getHotelList.value = result3.productList;

  // 用于获取猜你喜欢的数据
  const result4 = await youLikeListApi(id);
  console.log("youLikeList", result4);
  youLikeList.value = result4;
  new Swiper(".swiper", {
    // direction: "vertical", // 垂直切换选项
    loop: true, // 循环模式选项

    // 如果需要前进后退按钮
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    // 如果需要分页器
    pagination: {
      el: ".swiper-pagination",
    },
  });
  new Swiper(".swiper-container", {
    // direction: "vertical", // 垂直切换选项
    // loop: true, // 循环模式选项

    // 如果需要前进后退按钮
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
  // console.log(mySwiper);
});
const goRegister = () => {
  // console.log(1);
  router.push("/register");
};
const goLogin = () => {
  router.push("/login");
};

// 点击关于个人的按钮跳转
const goPersonal = (page) => {
  // console.log(page);
  router.push({
    path: "/personal",
    query: {
      page,
    },
  });
};
</script>

<style scoped lang="less">
.flex {
  // display: flex;
  display: inline-block;
  .sliderContent {
    display: inline-block;
  }
}
.bannerLogincard {
  .loginBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 228px;
    border: 1px solid #e5e5e5;
    height: 240px;
    .titleImg {
      img {
        width: 47px;
        height: 47px;
        border-radius: 50%;
        border: 4px solid #e5e5e5;
      }
    }
    .icon {
      display: flex;
      // width: 228px;
      flex-wrap: wrap;
      justify-content: center;
      padding: 0 15px 15px 15px;

      div {
        width: 65px;
        text-align: center;
        margin-top: 15px;
        span {
          color: #ffc300;
          font-size: 20px;
        }
        p {
          margin-top: 5px;
        }
      }
    }
  }
}
body,
html {
  background-color: rgb(248, 248, 248);
}
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
}
.content {
  width: 1200px;
  margin: 0 auto;
}
.banner {
  display: flex;
}
.header {
  height: 200px;
}
.classificationDetail {
  display: none;
}
.classification {
  width: 230px;
  height: 475px;
  position: relative;
  text-align: left;
  box-sizing: border-box;
  margin-top: -50px;
  color: #646464;
  background: #fff;
  border: 1px solid #e5e5e5;
}
.classificationTitle {
  height: 50px;
  padding-top: 15px;
  box-sizing: border-box;
  color: #222222;
  font-size: 16px;
  font-weight: 700;
  margin-left: 15px;
}
.classificationContent {
  padding: 10px 0 8px;
  height: 425px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.classificationContent li {
  position: relative;
  box-sizing: border-box;
  padding: 2px 12px;
  height: 26px;
}
.rightBanner {
  width: 550px !important;
  height: 240px;
  margin-left: 10px;
  margin-top: 10px;
  position: relative;
}
.homeHeaderLinks {
  width: 640px;
  margin-top: -50px;
  display: flex;
}
.homeHeaderLinksA {
  color: #222;
  font-weight: 700;
  font-size: 16px;
  margin: 0 20px;
  cursor: pointer;
  position: relative;
}
.bannerSlider {
  width: 550px;
  // overflow: hidden;
  .swiper {
    width: 550px;
    overflow: hidden;
  }
}
.bannerSlider img {
  width: 550px;
  height: 240px;
}
.bannerRow {
  width: 950px;
  margin-top: 17px;
  display: flex;
  // width: 550px;
  .shadow1 img {
    width: 150px;
    height: 240px;
    margin: 0 10px;
  }
  .default {
    width: 228px;
    height: 238px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    div,
    span {
      text-align: center;
    }
    img {
      width: 47px;
      height: 47px;
      border-radius: 50%;
      border: 4px solid #e5e5e5;
    }
    span {
      font-size: 16px;
      color: #222;
      text-align: center;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .register,
    .login {
      cursor: pointer;
      width: 118px;
      text-align: center;
      margin: 10px auto 15px auto;
      background: #fff;
      border: 1px solid #e5e5e5;
      border-radius: 40px;
      font-size: 14px;
      color: #333;
      transition: background-color 0.5s;
      display: block;
      line-height: 38px;
    }
  }
  .pic-2 img,
  .pic-3 img {
    width: 270px;
    height: 165px;
    margin-right: 10px;
  }
  .pic-4 img {
    width: 150px;
    height: 165px;
    margin-right: 10px;
  }
  .downloadApp {
    width: 228px;
    padding: 0 65px;
    height: 165px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-content: center;
    // align-content: center;
    align-items: center;

    .qrcodeBox img {
      width: 95px;
      height: 95px;
    }
    .sl {
      font-size: 12px;
      font-weight: 500;
    }
    .red {
      color: #ec5330;
      margin-right: 5px;
    }
  }
}
.maoyanContainer {
  margin-top: 40px;
  position: relative;
  .navContainer {
    background: linear-gradient(
        to right,
        rgb(250, 60, 104) 2%,
        rgb(254, 70, 77) 97%
      )
      rgb(250, 60, 104);
    width: 100%;
    height: 44px;
    line-height: 44px;
    box-sizing: border-box;
    font-size: 14px;
    color: #fff;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    .clearfix {
      display: flex;
      .title {
        font-size: 18px;
        margin-left: 13px;
        margin-right: 10px;
        float: left;
        padding: 0 5px;
        position: relative;
        cursor: pointer;
        text-transform: uppercase;
        font-family: "MFShangHei-Regular" !important;
      }
      .navItem {
        position: relative;
        cursor: pointer;
        text-transform: uppercase;
        padding: 0 5px;
      }

      .right {
        flex: 1;
        text-align: right;
        margin-right: 12px;
      }
      // 鼠标移入后文本下方的小三角
      .active::after {
        position: absolute;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 7px solid #fff;
        content: " ";
        display: block;
        width: 2px;
        height: 0;
        top: 37px;
        left: 0;
        right: 0;
        margin: auto;
      }
    }
  }
}
.slider {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  .sliderList {
    margin: 1px 12px;
    // position: relative;
    // height: 100%;
  }
  .sliderContentList {
    display: flex;
  }
  .sliderContent {
    height: 297px;
    width: 214px;
    // float: left;
    margin-right: 19px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    position: relative;
    img.image {
      width: 100%;
      border-radius: 4px;
    }
    img.imageSmall {
      position: absolute;
      top: 10px;
      z-index: 99;
      left: -6px;
      height: 20px;
      box-shadow: 0 2px 6px 0 rgb(0 0 0 / 20%);
      width: auto;
      border: 0px;
    }
    .filmInfo {
      height: 100px;
      width: 100%;
      position: absolute;
      bottom: -3px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      background-image: linear-gradient(
        -180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(29, 45, 55, 0.8) 99%
      );
      color: #fff;
      .filmScore {
        font-size: 12px;
        color: #fff;
        text-align: left;
        margin-top: 48px;
        padding-left: 10px;
        font-weight: 500;
        span {
          font-size: 16px;
          color: #fd9827;
          font-weight: 500;
        }
      }
      .filmName {
        text-align: left;
        color: #fff;
        padding-left: 10px;
        font-size: 16px;
        white-space: nowrap;
        width: 6em;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 500;
      }
      // .filmName,
      // .buyTicket {
      // 	position: absolute;
      // 	bottom: 10px;
      // }
      .buyTicket {
        background: #ff4949;
        border-radius: 100px;
        color: #fff;
        padding: 2px 12px 3px 12px;
        font-size: 14px;
        position: relative;
        top: -27px;
        cursor: pointer;
        line-height: 20px;
        text-align: center;
        float: right;
        right: 10px;
      }
    }
  }
}
.indexNavContainer {
  background: linear-gradient(
      to right,
      rgb(243, 182, 74) 2%,
      rgb(242, 197, 69) 97%
    )
    rgb(243, 182, 74);
  border-radius: 5px 5px 0 0;
}
.minsuView {
  padding: 20px;
  padding-right: 0;
  padding-bottom: 0;
  border: 1px solid #e5e5e5;
  border-top: 0px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background: #fff;
  .products {
    display: flex;
    flex-wrap: wrap;
    .minsuItem {
      margin-right: 18px;
      .productHeader {
        position: relative;
        width: 370px;
        .productImg {
          width: 370px;
          // height: 208px;
          border-radius: 4px;
          background: url(https://p0.meituan.net/mmc/35ad1f9253761ea6ff822b5e659f234f3758.png);
          background-size: cover;
          background-position: 50%;
          max-width: 100%;
          height: 208px;
          margin-bottom: 11px;
          cursor: pointer;
        }
        .headImg {
          border: 2px solid #ffffff;
          height: 48px;
          width: 48px;
          position: absolute;
          bottom: -12px;
          right: 15px;
          z-index: 9;
          border-radius: 40px;
          background-image: url(https://p0.meituan.net/mmc/35ad1f9253761ea6ff822b5e659f234f3758.png);
          background-size: 100%;
          background-position: 50% 50%;
          background-repeat: no-repeat;
        }
      }
      .productInfo {
        text-align: left;
        padding-bottom: 25px;
        .productTitle {
          font-size: 16px;
          color: #222222;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin: 7px 0;
          font-weight: 400;
          width: 297px;
        }
        .subTitle {
          font-size: 12px;
          color: #999999;
          text-align: left;
        }
        .priceNumber {
          font-weight: 500;
          font-size: 22px;
          color: #ff6600;
          letter-spacing: -0.8px;
          padding: 4px 0;
          .priceIcon {
            font-size: 14px;
          }
        }
      }
    }
  }
}
.color {
  background-color: #4fb5d7;
  border-radius: 5px 5px 0 0;
}
// 猜你喜欢
.recommendList {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-top: 0;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  max-height: 758px;
  padding: 10px 10px 20px;
  width: 100%;
  box-sizing: border-box;
  overflow-y: hidden;
  text-align: left;
  .cardContainer {
    padding: 10px;
    .recommendWrapper {
      width: 100%;
      box-sizing: border-box;
      .imgBox {
        // height: 0;
        width: 213px;
        // padding-bottom: 56.25%;
        background-color: #f4f4f4;
        background-image: url(https://p0.meituan.net/travelcube/214b8411190e874781fe91dd3096236211567.png);
        background-size: cover;
        background-position: 50% 50%;
        border-radius: 4px;
        overflow: hidden;
        .image {
          width: 210px;
          font-size: 0;
          height: 120px;
          object-fit: cover;
        }
      }
      .infoBox {
        position: relative;
        margin-top: 10px;
        width: 210px;
        overflow: hidden;
        .title {
          font-size: 16px;
          line-height: 22px;
          width: 100%;
          height: 22px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        .scoreLine {
          height: 24px;
          // display: inline-block;
          display: flex;
          .score {
            width: 84px;
            // border: 1px solid red;
            display: inline-block;
            .goodscommentNum {
              // margin: 10px 0;
              width: 80px;
              position: relative;
              .goodsStartTop {
                overflow: hidden;
                position: absolute;
                top: 0;
                left: 0;
              }
            }
            .icon-start {
              color: #ff6600;
              &.gray {
                color: gray;
              }
            }
          }
          .commentNumber {
            font-size: 12px;
            color: #999;
            height: 24px;
            line-height: 24px;
            margin-left: 10px;
          }
        }
        .descLine {
          height: 18px;
          font-size: 12px;
          color: #999999;
          width: 100%;
          // height: 18px;
          line-height: 18px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-top: 4px;
        }
        .bottomLine {
          height: 28px;
          .priceBox {
            color: #ff6600;
            .yuan {
              font-size: 14px;
              font-weight: 700;
            }
            .priceNumber {
              font-size: 22px;
            }
            .priceDesc {
              font-size: 12px;
              margin-left: 4px;
              font-weight: 700;
            }
          }
        }
      }
    }
  }
}
</style>
